//# Modal基础视图
define(['jquery', 'underscore', 'backbone', 'RootView'],
    function ($, _, Backbone, RootView) {
        var modalView = RootView.extend({
            el: 'body',
            initialize: function () {
                this.remoteView = null;
                this.initializeModalEvents();
                this.delegateEvents();

            },

            initializeModalEvents: function () {
                var modalEvents = {
                    'click           [data-toggle="remotemodal"]': 'getRemoteModal',
                    'click          [data-dismiss="remotemodal"]': 'removeRemoteModal'
                }

                this.events = this.events || {};
                _.extend(this.events, modalEvents);
            },

            //# 获取RmoteModal内容并渲染
            getRemoteModal: function (event) {
                event.preventDefault();

                var $target = $(event.target),
                    $page = $target.closest('#Page'),
                    $toggleTarget = $target.closest('[data-toggle="remotemodal"]'),
                    that = this;

                if ($toggleTarget.length == 0) {
                    $toggleTarget = $target.closest('[data-toggle="operate"]');
                }
                var modalUrl = $toggleTarget.data('modal-url');

                $.ajax({
                    url: modalUrl,
                    type: 'GET',
                    dataType: 'html'
                }).done(function (res) {
                    if ($('#RemoteModal').length > 0) {
                        $('.modal-backdrop').remove();
                        $('#RemoteModal').remove();
                    }
                    $page.append(res);
                    that.initDisplay();

                    var $RemoteModal = that.$('#RemoteModal'),
                        scriptPath = $RemoteModal.data('script-path') || 'ModalView';
                    $RemoteModal.modal({
                        keyboard: false,
                        backdrop: 'static',
                        show: true
                    });

                    require([scriptPath], function (View) {
                        that.remoteView = new View();
                    });
                }).always(function () {
                    that.$el.removeClass('loading');
                    $target.prop('disabled',false);
                    $('[data-toggle="remotemodal"]').removeClass('waiting');
                });
                that.$el.addClass('loading');
                $target.prop('disabled',true);
                $('[data-toggle="remotemodal"]').addClass('waiting');
            },


            //# 彻底移除Modal,防止隐藏Modal对后续操作的影响，bootstrap默认的关闭为隐藏
            removeRemoteModal: function (event) {
                var $target = $(event.target),
                    $modal = $target.closest('.modal'),
                    that = this;
                $modal.modal('hide');
                $modal.on('hidden.bs.modal', function () {
                    $(this).remove();
                    if (that.remoteView) {
                        that.remoteView.undelegateEvents();
                    }
                });
            }
        });
        return modalView;
    });